<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>精益管控</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/Multiselect.css"/>
    <link rel="stylesheet" href="css/prettify.css"/>
    <link rel="stylesheet" href="css/jygk-video.css"/>
</head>
<body>
<div class="container">
    <p class="name" style="    top: 6%;">精益管控</p>
    <!-- list-->
    <div class="list">
        <ul class="select">
            <li>
                <select id="province">
                    <!--<option value="省公司">省公司</option>-->
                    <option value="北京">北京</option>
                    <option value="天津">天津</option>
                    <option value="河北">河北</option>
                    <option value="冀北">冀北</option>
                    <option value="山西">山西</option>
                    <option value="山东">山东</option>
                    <option value="上海">上海</option>
                    <option value="江苏">江苏</option>
                    <option value="浙江">浙江</option>
                    <option value="安徽">安徽</option>
                    <option value="福建">福建</option>
                    <option value="湖北">湖北</option>
                    <option value="湖南">湖南</option>
                    <option value="河南">河南</option>
                    <option value="江西">江西</option>
                    <option value="四川">四川</option>
                    <option value="重庆">重庆</option>
                    <option value="辽宁">辽宁</option>
                    <option value="吉林">吉林</option>
                    <option value="龙江">龙江</option>
                    <option value="蒙东">蒙东</option>
                    <option value="陕西">陕西</option>
                    <option value="甘肃">甘肃</option>
                    <option value="青海">青海</option>
                    <option value="宁夏">宁夏</option>
                    <option value="新疆">新疆</option>
                    <option value="西藏">西藏</option>

                </select>
            </li>
            <li>
                <select id="area">
                    <!--<option value="地市公司">地市公司</option>-->
                </select>
            </li>
            <li>
                <select id="voltage">
                    <!--<option value="电压等级">电压等级</option>-->
                </select>
            </li>
            <li>
                <select id="substation">
                    <option value="站" id="type"></option>

                </select>
            </li>
            <li>
                <select id="instation">
                    <option value="监测点">监测点</option>
                </select>
            </li>
        </ul>
        <!-- table-->
        <div class="table">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!-- -->
    <div class="video">
        <ul class="video-list" style="width: 3800px;height:1500px;">
            <li>
                <object id='playerMap0' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name0">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>
            <li>
                <object id='playerMap1' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name1">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>
            <li>
                <object id='playerMap2' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name2">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>
            <li>
                <object id='playerMap3' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name3">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>
            <li>
                <object id='playerMap4' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name4">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>
            <li>
                <object id='playerMap5' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name" id="video-name5">张华变电站视频</p>
                <!--<img src="img/play.png" alt="" class="play"/>-->
            </li>

        </ul>
        <ul class="pages">
            <li class="hover">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>...</li>
            <li> <<</li>
            <li> >></li>
            <li id="next">下一页</li>
        </ul>
    </div>
    <div class="tab">
        <p class="active">变电</p>
        <!--<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>-->
        <p>输电</p>

    </div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Multiselect.js"></script>
<script src="js/prettify.js"></script>
<script src="js/jygk-video.js"></script>
<script src="js/video.js"></script>
<script src="js/initVideo.js"></script>
<script type="text/javascript">
    // var ip = 'http://10.1.166.214:8080/';
    var ip = '/';
//    监测点个数
    var ind;
//    监测点列表
    var videoLists=[];
//    变电站列表
    var jcList = [];

    $(document).ready(function () {
        var KV,typeName='变电';
        $('#type').text('变电站');
        $('.tab p').click(function () {
            typeName = $(this).text();
            if($(this).text() == '输电'){
                $('#type').text('输电线路');
            }else{
                $('#type').text('变电站');
            }
        });
        var i = 0;

        $('#province').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            multiple:false,
            buttonWidth: '308px',
            buttonText:function(options,select){
              return '省公司'
            },
            dropRight: true,
            maxHeight: 357,
            onChange: function (option, checked) {
                $('#province').siblings().children('span').text('省公司');
                if($(option).val() == '省公司'){
                    return;
                }else{
                    $('.table div').empty();
                    $.ajax({
                        type:'POST',
                        url:encodeURI(ip+'getProvinceSubData?provinceCode='+$(option).val()+'平台&elecType='+typeName),
                        data:null,
                        dataType:'json',
                        success:function(data){
//                            console.log(data);
                            //表中填写数据
                            for(var i=0;i<data.length;i++){
                                $('.table div:first-child').append("<p>"+data[i].PROVINCE.replace('平台','')+"</p>");
                                $('.table div:nth-child(2)').append("<p>"+data[i].CITY+"</p>");
                                $('.table div:nth-child(3)').append("<p>"+data[i].VOLTAGELEVEL+"</p>");
                                $('.table div:nth-child(4)').append("<p code='"+data[i].STATION_CODE+"'>"+data[i].STATION+"</p>");
//                                $('.table div:nth-child(2)').append(`<p>${data[i].CITY}</p>`);
                            }
                        },
                        error:function(err){
                            console.log(err);
                        }
                    });
                    $.ajax({
                        type:'POST',
                        url:encodeURI(ip+'getProvinceData?provinceCode='+$(option).val()+'平台'),
                        data:null,
                        dataType:'json',
                        success: function (data) {
//                            console.log(data);
                            var html = '' ;
                            for(var i=0;i<data.length;i++){
                                html+="<option value='"+ data[i].CITY_CODE +"'>"+data[i].CITY+"</option>";
                            }
                            $('#area').html(html);
                            $('#area').multiselect('rebuild');

                        },
                        error:function(err){
                            console.log(err);
                        }
                    });
                }


            },
            nonSelectedText: '省公司',
            numberDisplayed: 10,
            enableFiltering: false,
            allSelectedText: '全部'
        });
        var areaCode;
        $('#area').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            buttonWidth: '308px',
            dropRight: true,
            buttonText:function(options,select){
                return '地市公司'
            },
            maxHeight: 357,
            onChange: function (option, checked) {
//                alert($(option).text());
                $('#voltage').empty();
                $('#voltage').multiselect('rebuild');
                $('#substation').empty();
                $('#substation').multiselect('rebuild');
                $('#instation').empty();
                $('#instation').multiselect('rebuild');
                areaCode = $(option).val();
//                getCitySubData?cityCode=值&elecType=值
                $('.table div').empty();
                $.ajax({
                    type:'POST',
                    url:encodeURI(ip+'getCitySubData?cityCode='+$(option).val()+'&elecType='+typeName),
                    data:null,
                    dataType:'json',
                    success: function (data) {
//                        console.log(data);
                        for(var i=0;i<data.length;i++){
                            $('.table div:first-child').append("<p>"+data[i].PROVINCE.replace('平台','')+"</p>");
                            $('.table div:nth-child(2)').append("<p>"+data[i].CITY+"</p>");
                            $('.table div:nth-child(3)').append("<p>"+data[i].VOLTAGELEVEL+"</p>");
                            $('.table div:nth-child(4)').append("<p code='"+data[i].STATION_CODE+"'>"+data[i].STATION+"</p>");
//                                $('.table div:nth-child(2)').append(`<p>${data[i].CITY}</p>`);
                        }

                    },
                    error:function(err){
                        console.log(err);
                    }
                });
                $.ajax({
                    type:'POST',
                    url:encodeURI(ip+'getAreaSubData?areaCode='+$(option).val()+'&elecType='+typeName),
                    data:null,
                    dataType:'json',
                    success: function (data) {
//                            console.log(data);
                        var html = '' ;
                        for(var i=0;i<data.length;i++){
                            html+="<option>"+data[i].VLEVEL+"</option>";
                        }
                        $('#voltage').html(html);
                        $('#voltage').multiselect('rebuild');

                    },
                    error:function(err){
                        console.log(err);
                    }
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '地市公司',
            numberDisplayed: 60,
//            enableFiltering: true,
            allSelectedText: '全部'
        });

        $('#voltage').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            buttonText:function(options,select){
                return '电压等级'
            },
            onChange: function (option, checked) {
                console.log($(option));
                $('.table div').empty();
                $('#substation').empty();
                $('#substation').multiselect('rebuild');
                $('#instation').empty();
                $('#instation').multiselect('rebuild');
                $.ajax({
                    type:'POST',
                    url:encodeURI(ip+'getAreaVoltageData?areaCode='+areaCode+'&elecType='+typeName+'&voltageLevel='+$(option).text().replace('kV','')),
                    data:null,
                    dataType:'json',
                    success: function (data) {
                        console.log(data);
                        jcList = data;
                        for(var i=0;i<data.length;i++){
                            $('.table div:first-child').append("<p>"+data[i].PROVINCE.replace('平台','')+"</p>");
                            $('.table div:nth-child(2)').append("<p>"+data[i].CITY+"</p>");
                            $('.table div:nth-child(3)').append("<p>"+data[i].VOLTAGELEVEL+"</p>");
                            $('.table div:nth-child(4)').append("<p code='"+data[i].STATION_CODE+"'>"+data[i].STATION+"</p>");
//                                $('.table div:nth-child(2)').append(`<p>${data[i].CITY}</p>`);
                            $('#substation').append("<option value='"+ data[i].STATION_CODE +"'>"+data[i].STATION+"</option>");
                            $('#substation').multiselect('rebuild');
                        }
                    },
                    error:function(err){
                        console.log(err);
                    }
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '电压等级',
            numberDisplayed: 60,
            enableFiltering: false,
            allSelectedText: '全部'
        });

        $('#substation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
//            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            buttonText:function(options,select){
                return '变电站'
            },
            maxHeight: 357,
            onChange: function (option, checked) {
//                alert($(option).val());
//                  调取统一视频接口
                $('#instation').empty();
                $('#instation').multiselect('rebuild');
                console.log(videoMainWndIndexArr);

                var code = $(option).val();
                var text = $(option).text();
                $('.table div').empty();
                videoList(objectId,code);
                console.log(videoMainWndIndexArr);

//                点击后 截取前 i(监测点个数)
                var jcdResult = jcList.slice(0,ind);
                for(var i = 0 ;i <jcdResult.length;i++){
                    $('.table div:first-child').append("<p>"+jcdResult[i].PROVINCE.replace('平台','')+"</p>");
                    $('.table div:nth-child(2)').append("<p>"+jcdResult[i].CITY+"</p>");
                    $('.table div:nth-child(3)').append("<p>"+jcdResult[i].VOLTAGELEVEL+"</p>");
                    $('.table div:nth-child(4)').append("<p>"+$(option).text()+"</p>");

                }

                        /*if(条件) {
                         this.clearSelection();//清除所有选择及显示
                         }*/
            },
            nonSelectedText:'变电站',
            numberDisplayed: 60,
//            enableFiltering: true,
            allSelectedText: '全部'
        });
        $('#instation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            buttonText:function(options,select){
                return '监控点'
            },
            onChange: function (option, checked) {

            },
            nonSelectedText: '监控点',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText: '全部',
        });

//        点击下一页
        $('#next').click(function(){
            next(i++);
        })
    });

</script>
<script language="javascript" type="text/javascript" for="playerMap"
        event="OnClickActiveWnd(sMainWndIndex,sSubWndNo,pCode)">
    showXXX(sMainWndIndex, sSubWndNo, pCode);
</script>
</body>
</html>